<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>雷锋热线</title>
    <style>
        ul{
            background: #0056b3;
            list-style-type: none; /*清除无序列表前的小点*/
            width: auto;
            height: 50px;
            text-align: center;
        }
        li{
            list-style-type: none;
            float: left;
            width: 130px;
            height: 100%;
            padding-left:15%;
            margin-right: 5%;  /*两个li之间的距离*/
        }
        a:link,a:visited{ /*鼠标未点击和点击过时的样式*/
            color: #FFFFFF;
            background-color: #0056b3;
            text-align: center;
            line-height: 50px; /*li行高*/
            padding: 10px;
            text-decoration: none; /*去下划线*/
        }
        a:hover{ /*鼠标移动到点击位时的样式，active指点击过后的样式*/
            color: #000; /* 鼠标悬停时文字颜色变为黑色 */
            border: 1px solid #409eff;
            /* color: #fff; */
            background: hsla(0,0%,97.3%,0.3);
            -webkit-transition: all .5s;
            transition: all .5s;
        }
        body {
            font-family: Arial, sans-serif;
            background-color: white;
        }

        form {
            max-width: 700px; /* 增大表单最大宽度 */
            margin: 0 auto;
            background-color: #f2f2f2;
            border: 2px solid #ccc; /* 增大边框宽度 */
            padding: 40px; /* 增大内边距 */
            border-radius: 15px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }

        form label {
            font-weight: bold;
            font-size: 24px; /* 增大标签字体大小 */
        }

        h1 {
            text-align: center;
            font-size: 40px;
            margin-bottom: 20px;
            margin-top: 1%;
        }

        input[type="text"], textarea {
            resize: none;
            border: 2px solid #ccc; /* 增大边框宽度 */
            width: 100%;
            padding: 10px;
            margin-bottom: 20px;
            box-sizing: border-box;
            font-size: 24px; /* 增大标签字体大小 */
        }

        .radio-row label{
            margin-right: 50px; /* 增大右侧间距 */
            font-size: 24px; /* 增大字体大小 */
        }

        .radio-row input[type="radio"]{
            margin-top: 10px;
            margin-bottom: 30px; /* 增大下方间距 */
            width: 25px; /* 增大单选框尺寸 */
            height: 25px; /* 增大单选框尺寸 */
            cursor: pointer; /* 鼠标指针样式 */
        }

        input[type="button"], input[type="reset"] {
            width: 48%;
            padding: 10px 20px; /* 增加内边距 */
            border-radius: 5px; /* 圆角边框 */
            font-size: 16px; /* 字体大小 */
            cursor: pointer; /* 鼠标指针样式 */
            transition: background-color 0.3s; /* 过渡效果 */
            background-color: #007bff;
            color: #ffffff;
            border: none;
            cursor: pointer;
        }

        .error {
            color: red;
            text-align: center;
            margin-top: 5px;
            font-size: 25px;
        }
    </style>
    <script>
        function insert_lfrx(){
            let name = document.getElementById("name");
            let sex = document.getElementById("sex");
            let radio = document.getElementsByName("group");
            let phone = document.getElementById("phone");
            let email = document.getElementById("email");
            let address = document.getElementById("address");
            let text = document.getElementById("text");
            let errorMessage = document.getElementById("errorMessage");

            if(name.value !== ""){
                if(phone.value !== ""){
                    if(email.value !== ""){
                        if(address.value !== ""){
                            if(text.value !== ""){
                                if(radio[0].checked){
                                    sex.value = "男";
                                } else if(radio[1].checked){
                                    sex.value = "女";
                                }
                                document.getElementById("lfrx").submit();
                            }
                            else {
                                errorMessage.innerHTML = "事迹不能为空！";
                                return false;
                            }
                        } else {
                            errorMessage.innerHTML = "居住地址不能为空！";
                            return false;
                        }
                    } else {
                        errorMessage.innerHTML = "电子邮箱不能为空！";
                        return false;
                    }
                } else {
                    errorMessage.innerHTML = "电话号码不能为空！";
                    return false;
                }
            } else {
                errorMessage.innerHTML = "姓名不能为空！";
                return false;
            }
        }
    </script>
</head>
<body>

    <ul>
        <li><a href="/content/index_user"> 文明山西 </a></li>
        <li><a href="/content/LFRX_user"> 雷锋热线 </a></li>
        <li><a href="/user/exit"> 退出登录 </a></li>
    </ul>

    <form id="lfrx" method="post" action="/content/insert_lfrx" enctype="application/x-www-form-urlencoded">
        <h1>雷锋热线</h1>
        <label for="name">姓名:</label>
        <input type="text" name="name" id="name"/><br/>

        <div class="radio-row">
            <label>性别:</label>
            <input type="radio" name="group" id="man" checked="true" value="0">
            <label for="man">男</label>
            <input type="radio" name="group" id="woman" value="1">
            <label for="woman">女</label>
        </div>
        <input type="hidden" name="sex" id="sex"/>

        <label for="phone">联系电话:</label>
        <input type="text" name="phone" id="phone"/><br/>

        <label for="email">电子邮箱:</label>
        <input type="text" name="email" id="email"/><br/>

        <label for="address">联系地址:</label>
        <input type="text" name="address" id="address"/><br/>

        <label>请输入你想表达的事迹:</label><br/>
        <label for="text"></label><textarea name="text" id="text" cols="50" rows="5"></textarea><br/>

        <input type="button" onclick="insert_lfrx()" value="提交"/>
        <input type="reset" value="清除"/>

        <div id="errorMessage" class="error"></div>
    </form>
</body>
</html>
